<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名"
        v-model="page.searchObj.query"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="queryMouldAll"
        >搜索</el-button
      >
    </div>
    <el-button
      type="primary"
      style="display: flex; justify-content: flex-start; margin: 10px 0"
      @click="add"
      >新增</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      height="65vh"
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="keyword" label="关键词"> </el-table-column>
      <el-table-column prop="suit" label="适用人群"> </el-table-column>
      <el-table-column prop="target" label="方案目标"> </el-table-column>
      <el-table-column prop="remarks" label="备注"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="value">
          <span>
            <el-switch
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              v-model="value.row.state"
              :active-value="0"
              inactive-value="1"
              @change="updateState(value.row)"
            >
            </el-switch>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="">
          <span>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogTableVisible"  width="70%">
      <el-tabs type="border-card">
        <el-tab-pane label="基本信息" style="height: 50vh;">
          <el-form
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="标题">
                  <el-input
                    autocomplete="off"
                    v-model="mouldView.mould.title"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="关键字">
                  <el-input
                    autocomplete="off"
                    v-model="mouldView.mould.keyword"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="适用人群">
                  <el-input
                    autocomplete="off"
                    v-model="mouldView.mould.suit"
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="方案目标">
                  <el-input
                    autocomplete="off"
                    v-model="mouldView.mould.target"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  rows="8"
                  v-model="mouldView.mould.remarks"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="饮食干预" style="height: 50vh;">
          <el-table :data="tableData1" style="width: 100%;height: 45vh;" @selection-change="handleSelectionChange1">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="foodid" label="编号">
            </el-table-column>
            <el-table-column prop="foodname" label="食品名称">
            </el-table-column>
            <el-table-column prop="foodtype" label="类型"> </el-table-column>
            <el-table-column prop="foodheat" label="100g含能量"> </el-table-column>
            <el-table-column prop="protein" label="蛋白质量"> </el-table-column>
            <el-table-column prop="fat" label="脂肪量"> </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="page1.pageNum"
              :page-sizes="[4,8]"
              :page-size="page1.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
            >
            </el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="运动干预" style="height: 50vh;">
          <el-table :data="tableData2" style="width: 100%;height: 45vh" @selection-change="handleSelectionChange2">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="exerciseid" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="ydmz" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="ydqd" label="运动强度"> </el-table-column>
            <el-table-column prop="qbdl" label="千步当量"> </el-table-column>
            <el-table-column prop="ydsj" label="运动时间"> </el-table-column>
            <el-table-column prop="nlqj" label="年龄区间"> </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="page2.pageNum"
              :page-sizes="[4,8]"
              :page-size="page2.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      page: {
        //模板分页
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          query: "", //标题
        },
      },
      tableData: [], //表格数据
      total: 0, //总数量
      page1: {
        //膳食分页
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 4, //页面数量
        searchObj: {
          //条件对象
          foodname: "", //标题
        },
      },
      tableData1: [], //表格数据
      total1: 0, //总数量

      page2: {
        //运动分页
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          query: "", //标题
        },
      },
      tableData2: [], //表格数据
      total2: 0, //总数量
      mouldView:{
        mould:{
          title:'',//标题
          keyword:'',//关键词
          suit:'',//适用人群
          target:'',//方案目标
          remarks:'',//备注
        },//模板
        food:[],//膳食
        exercise:[],//运动
      }
    };
  },
  created() {
    this.queryMouldAll();//模板
    this.queryAllFood();//膳食
    this.queryAllExercise();//运动
  },
  methods: {
    //模板
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryMouldAll();
    },
    handleCurrentChange(val) {
      this.page1.pageNum = val;
    },
    //膳食
    handleSizeChange1(val) {
      this.page1.pageSize = val;
    },
    handleCurrentChange1(val) {
      this.page1.pageNum = val;
    },
    //运动
    handleSizeChange2(val) {
      this.page2.pageSize = val;
    },
    handleCurrentChange2(val) {
      this.page2.pageNum = val;
    },
    //新增模板
    add() {
      this.dialogTableVisible = true;
    },
    // 查询所有模板
    queryMouldAll() {
      this.axios.post("/api/hj/queryMouldAll", this.page).then((result) => {
        this.total = result.data.total;
        this.tableData = result.data.list;
      });
    },
    //查询膳食信息
    queryAllFood() {
      this.axios.post("/api/lzh/queryAllFood",this.page).then((result) => {
        this.total1 = result.data.total;
        this.tableData1 = result.data.list;
      });
    },
    handleSelectionChange1(val) {
        this.mouldView.food=val;
      },
    //查询运动信息
    queryAllExercise() {
      this.axios.post("/api/lzh/queryAllExercise",this.page).then((result) => {
        this.total2 = result.data.total;
        this.tableData2 = result.data.list;
      });
    },
    handleSelectionChange2(val) {
        this.mouldView.exercise=val;
      },
      //提交
      save(){
        if(this.mouldView.food.length>0){
          if(this.mouldView.exercise.length>0){
            console.log(this.mouldView)
            this.axios.post("/api/hj/saveMould",this.mouldView)
            .then(result=>{
              if(result.data>0){
                  this.$message({
                  showClose: true,
                  message: '成功操作一条数据',
                   type: 'success'
          });
          this.queryMouldAll();//模板
          this.dialogTableVisible=false;//关闭
              }
            })
        }else{
          this.$message('请选择一项运动干预模板信息');
        }
        }else{
          this.$message('请选择一项饮食干预模板信息');
        }
      },
    // 修改状态
    state(id, state) {
      this.axios
        .get("/api/hj/updateUserState", {
          params: {
            id: id,
            state: state,
          },
        })
        .then((result) => {
          this.searchQueryMember();
        });
    },
    updateState(obj) {
      // 0表示启用 1表示禁用
      if (obj.state > 0) {
        this.state(obj.id, 1);
      } else {
        this.state(obj.id, 0);
      }
    },
  },
};
</script>
  
  <style>
</style>